<script lang="ts">
	import { classMap } from '@smui/common/internal';
	import type { COLOR_TYPE } from '$components/basic/message';

	export let date = '';
	const colorMapper: { [key: string]: string } = {
		PreOrder: 'success',
		Custom: 'primary',
		'In Stock': 'warning',
		CloseOut: 'danger'
	};

	/*
    使用钩子获取dom，设置好父元素的布局后，再显示子元素
  */
	export let show = true;
	export let content = 'Pre Order';

	let className = '';
	export { className as class };

	$: type = colorMapper[content];
	$: tipStyle = `--tip-color: var(--${type}-color);display: ${show ? 'block' : 'none'}`;
</script>

<div
	style={tipStyle}
	class={classMap({
		'product-tip': true,
		[className]: true
	})}
>
	<div
		class="w-full text-center h-1/2 line-height-38px text-white font-size-14px"
		style="background-color: var(--tip-color)"
	>
		{content}
	</div>
	<div class="w-full text-center h-1/2 line-height-38px bg-white font-size-15px font-bold">
		{String(date).split('/').slice(0, 2).join('/')}
	</div>
</div>

<style>
	.product-tip {
		--primary-color: #60a5fa;
		--success-color: #10b981;
		--warning-color: #facc15;
		--danger-color: #ef4444;
		--tip-color: #60a5fa;

		/* absolute w-79px h-79px border border-solid top-0 left-0 z-2 */
		position: absolute;
		width: 79px;
		height: 79px;
		border: 1px solid var(--tip-color);
		top: 0;
		left: 0;
		z-index: 2;
	}

	/* 三角形 */
	.product-tip::after {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		border-left: 14px solid transparent;
		border-top: 14px solid var(--tip-color);
		top: calc(100% + 1px);
		left: 10px;
		margin-left: -10px;
	}
</style>
